<template >
    <div class="header">
     <header>
          <a href="https://github.com/suweiteng/vue2-management-platform">
            <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
        </a>
         <img src="./logo.svg" alt="logo" class="header-logo">
         <div class="header-user">
             <span >{{username}}</span>
             <span>({{user.area}}/{{user.identity}})</span>
         </div>
     </header>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            username:this.$store.state.username.cname
            }
        },
        // 接收值
        props:{user:{}},
        methods:{
        },
    }

</script>
<style  scoped>

header{
    background-color: skyblue;
    height: 80px;
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 20px;

}
     .header-user{
        float: right;
        margin-right: 150px;
        cursor: pointer;
     }
</style>